<template>
  <div>
<!--  顶部-->
  <div class="search-box">
    <div class="search-header">
      <i class="iconfont icon-back" @click="goBack"></i>
      <div class="search-con">
        <i class="iconfont icon-sousuo"></i>
        <input v-focus placeholder="双十一狂欢" v-model="searchText" />
      </div>
      <span @click="getSearch">搜索</span>
    </div>
  </div>
    <!--zhongbu-->
    <div class="search-content">
      <div class="search-list history-list">
        <p>最近搜索
          <i class="iconfont icon-delete" @click="deleteHistory" ></i>
        </p>
        <div>
          <span  v-for="item in searchHistory" @click="selectTag(item)">{{item}}</span>

        </div>
      </div>
      <div class="search-list hot-list">
        <p>热门搜索</p>
        <div>
         <span v-for="item in hotData" :class="{'hot':item.hot}" @click="selectTag(item.title)">{{item.title}}</span>

        </div>
      </div>
    </div>
    <popup :popup-title="popupTitle"
           :popup-show="popupShow"
           @cancePopup="cancelPopup"
           @confirmPopup="confirmPopup"></popup>
  </div>
</template>

<script>
  import {hotData} from "../../service/getData";
  import {getStore,dedupe} from "../../common/js/util";
  import {mapState,mapMutations} from 'vuex'
  import popup from '../../components/common/popup'


  export default {
        name: "search",
    // 注册
     components:{popup},

    computed:{
      ...mapState({
        searchHistory: state=>state.searchHistory
      })
    },
    created(){
      let searchHistory =getStore('searchHistory');
      if (!searchHistory){
        searchHistory=[]
      }
      this.ADD_HISTORY(searchHistory);
      this.getSelectTags()
    },
    // 顶部自动获取焦点设置(闪动)
      directives:{
          focus:{
            inserted:function (el) {
              el.focus()
            }
          }
      },


      methods:{
        ...mapMutations([
          'ADD_HISTORY'
        ]),
        //显示
        deleteHistory(){
          this.popupTitle='确认删除历史吗？'
          this.popupShow=true
        },
        // 确认删除
        confirmPopup(){
          this.ADD_HISTORY([]);
          this.cancelPopup();
        },
        // 取消删除
        cancelPopup(){
          ModalHelper.beforeClose();
          this.popupShow=false;
        },

        getSelectTags(){
          hotData().then((res)=>{
            this.hotData=res.data
          })
        },



        goBack(){
          this.$router.go(-1)
        },

        getSearch(){
          let keyword =this.searchText.replace(/^\s+|\s+$/g,"")  //去除两端空格
          if (!keyword){
            alert('请输入搜索内容')
            return
          }
          this.selectTag(keyword);
        },
        selectTag(keyword){
          this.searchHistory.unshift(keyword)
          this.$router.push('/product-list?keyword='+keyword+'&categoryId=0')
          this.ADD_HISTORY(dedupe(this.searchHistory))
        },


      },

      data(){
        return{
          searchText:'',
          hotData:[],
          popupTitle: '',
          popupShow: false
        }
      },

    }
</script>

<style scoped lang="scss">
  @import '../../common/style/mixin';
  .search-box{
    width: 100%;
    font-size: 30px;
    border-bottom: 1px solid gainsboro;
  .search-header{
  @include fj;
    width: 100%;
    height: 90px;
    padding: 15px 30px 15px 20px;
    box-sizing: border-box;
  @include border-1px(#dcdcdc);
  .icon-back{
    margin-top: 10px;
    width: 10%;
    font-size: 45px;
    font-weight: lighter;
  }
  .search-con{
    width: 76%;
    height: 60px;
    line-height: 60px;
    margin-left: -20px;
    padding-left: 30px;
    font-size: 26px;
    background: #f7f7f7;
    border-radius: 40px;
  @include boxSizing;
  .iconfont{
    font-size: 36px;
    padding-right: 20px;
  }
  input{
    font-size: 24px;
    background: #F7F7F7;
  }

  }
  span {
    width: 12%;
    text-align: center;
    height: 100%;
    line-height: 60px;
    color: #fff;
    font-size: 26px;
    background: #E93B3D;
    border-radius: 10px;
  }}}
/*中部*/
  .search-content{
    width: 100%;
    padding: 0 30px;
    box-sizing: border-box;
    .search-list{
      width: 100%;
      &.history-list{
        margin-bottom: 20px;
      }
      p{
        position: relative;
        padding: 20px 0;
        font-size: 30px;
        i{
          position: absolute;
          right: 0;
          top: 20px;
          font-size: 40px;
        }
      }
      div{
        display: flex;
        flex-shrink: 0;
        flex-wrap: wrap;
        span{
          padding: 8px 26px;
          margin: 0 20px 20px 0;
          font-size: 20px;
          color: #686868;
          background: #F0F2F5;
          border-radius: 10px;
          &.hot{
            color: #E93B3D;
          }
        }
      }

    }

  }



</style>
